<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1>仪表盘</h1>
      <p>欢迎回来，{{ userStore.userInfo?.username || '用户' }}</p>
    </div>
    
    <div class="stats-grid">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon user-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.totalUsers.toLocaleString() }}</div>
            <div class="stat-label">总用户数</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon movie-icon">
            <el-icon><VideoCamera /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.totalMovies.toLocaleString() }}</div>
            <div class="stat-label">影片数量</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon category-icon">
            <el-icon><Folder /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.totalCategories.toLocaleString() }}</div>
            <div class="stat-label">分类数量</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-icon comment-icon">
            <el-icon><ChatDotRound /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.totalComments.toLocaleString() }}</div>
            <div class="stat-label">评论数量</div>
          </div>
        </div>
      </el-card>
    </div>
    
    <div class="dashboard-content">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card header="最近活动">
            <el-table :data="recentActivities" style="width: 100%">
              <el-table-column prop="time" label="时间" width="180" />
              <el-table-column prop="action" label="操作" />
              <el-table-column prop="user" label="用户" width="120" />
            </el-table>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card header="系统信息">
            <div class="system-info">
              <div class="info-item">
                <span class="label">服务器状态：</span>
                <el-tag type="success">运行中</el-tag>
              </div>
              <div class="info-item">
                <span class="label">数据库连接：</span>
                <el-tag type="success">正常</el-tag>
              </div>
              <div class="info-item">
                <span class="label">系统版本：</span>
                <span>v1.0.0</span>
              </div>
              <div class="info-item">
                <span class="label">最后更新：</span>
                <span>2024-01-01</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useAuthStore } from '../stores/auth'
import { ElMessage } from 'element-plus'
import { statisticsService } from '../services/statisticsService'
import {
  User,
  VideoCamera,
  Folder,
  ChatDotRound
} from '@element-plus/icons-vue'

const userStore = useAuthStore()

const stats = reactive({
  totalUsers: 0,
  totalMovies: 0,
  totalCategories: 0,
  totalComments: 0
})

const recentActivities = ref([])
const loading = ref(true)

const loadDashboardData = async () => {
  try {
    loading.value = true
    
    // 使用统一的仪表板统计接口
    const dashboardRes = await statisticsService.getDashboardStats()
    const dashboardData = dashboardRes.data || {}
    
    // 设置统计数据
    stats.totalUsers = dashboardData.totalUsers || 0
    stats.totalMovies = dashboardData.totalMovies || 0
    stats.totalCategories = dashboardData.totalCategories || 0
    stats.totalComments = dashboardData.totalComments || 0
    recentActivities.value = dashboardData.recentActivities || []
    
  } catch (error) {
    console.error('加载仪表板数据失败:', error)
    ElMessage.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadDashboardData()
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard-header {
  margin-bottom: 30px;
}

.dashboard-header h1 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 28px;
}

.dashboard-header p {
  margin: 0;
  color: #666;
  font-size: 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  border-radius: 8px;
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.user-icon { background: #409EFF; }
.movie-icon { background: #67C23A; }
.category-icon { background: #E6A23C; }
.comment-icon { background: #F56C6C; }

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.dashboard-content {
  margin-top: 30px;
}

.system-info {
  padding: 10px 0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  color: #666;
  font-weight: 500;
}
</style>